<template>
  <!-- 资讯列表页面 -->
  <div>
    <div class="header">
      <!-- 下拉状态选择 -->
      <el-select v-model="Status_" clearable placeholder="状态">
        <el-option label="未审核" value="未审核" />
        <el-option label="审核通过" value="审核通过" />
        <el-option label="审核未通过" value="审核未通过" />
        <el-option label="推荐" value="推荐" />
        </el-option>
      </el-select>
      <!-- 输入内容查找 -->
      <el-input
        v-model="input"
        style="width: 240px; margin: 0 15px"
        placeholder="请输入标题"
        clearable
      />
      <!-- 下拉栏目选择 -->
      <!-- v-model="lanmu"绑定的是:value -->
      <el-select v-model="lanmu" clearable placeholder="请选择栏目">
        <el-option
          v-for="item in categoryData"
          :key="item.id"
          :label="item.category.name"
          :value="item.category.id"
        />
      </el-select>
      <!-- 查询按钮 -->
      <el-button type="primary" round style="margin: 0 5px" @click="queryFengCai">查询</el-button>
      <!-- 发布风采 -->
      <el-button type="primary" round style="float: right" @click="fabu()">发布风采</el-button>
    </div>
    <!-- 主要内容 -->
    <div class="connent" style="clear: both">
      <!-- 表格 -->
      <div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="cover" label="封面" width="100%">
            <template slot-scope="scope">
              <el-image
                style="height: 100px"
                :src="scope.row.cover"
                :preview-src-list="[scope.row.cover]"
              />
            </template>
          </el-table-column>
          <el-table-column label="风采">
            <template slot-scope="scope">
              <div @click="tiaoDetail(scope.row.id)">
                <h4 style="margin:0;padding:0">{{ scope.row.title }}</h4>
                <p style="margin:0;padding:0">{{ scope.row.baseUser && scope.row.baseUser.realname }}</p>
                <p style="margin:0;padding:0">{{ scope.row.category && scope.row.category.name }}</p>
                <p style="margin:0;padding:0">{{ scope.row.publishTime | fmtDate }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center" width="180">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status=='推荐'" type="info">推荐</el-tag>
              <el-tag v-if="scope.row.status=='未审核'" type="warning">未审核</el-tag>
              <el-tag v-if="scope.row.status=='审核未通过'" type="danger">审核未通过</el-tag>
              <el-tag v-if="scope.row.status=='审核通过'" type="success">审核通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="tuijian(scope.row.id,scope.row.status)"
              >推荐</el-button>
              <el-button type="text" size="small" @click="Shenhe(scope.row.id)">审核</el-button>
              <el-button type="text" size="small" @click="shanchu(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="footer">
      <!-- 分页 -->
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[8, 6, 4, 2]"
        :page-size="8"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 审核对话框 -->
    <el-dialog
      title="审核风采信息"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <h1 style="text-align:center">{{ title }}</h1>
      <!-- v-html实现style -->
      <p v-html="content">{{ content }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="shbu(id,status)">审核不通过</el-button>
        <el-button type="primary" @click="shpass(id,status)">审核通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from '@/utils/request'
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      // 下拉状态
      Status_: '',
      // 输入标题
      input: '',
      // 下拉栏目
      lanmu: '',
      // 表格数据
      tableData: [],
      // 分页
      total: 10,
      // 当前页
      currentPage: 1,
      // 每页大小
      pageSize: 8,
      categoryData_:[],
      // 存查询数组
      queryData: [],
      // 对话框
      dialogVisible: false,
      // 审核里的title
      title: '',
      // 审核里的内容
      content: '',
      // 审核通不通关获取的id
      id: '',
      status: ''
    }
  },
  computed: {
    ...mapState('fcCategory', ['categoryData']),
   
  },
  methods: {
    ...mapActions('fcCategory', ['getAllCategoryData']),
    // 发布风采
    fabu() {
      this.$router.push({ path: '/admin/info/article/Publish'})
    },
    // 转跳到详情
    tiaoDetail(id) {
      this.$router.push({ path: '/admin/info/article/Details', query: { id }})
    },
    // 审核通过
    async shpass(id, status) {
      this.dialogVisible = false
      const data = {
        id,
        status: '审核通过'
      }
      const res = await post('/article/changeStatus', data)
      if (res) {
        this.$message({
          message: '审核通过',
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllArticle()
      } else {
        this.$message.error('审核通过失败')
      }
    },
    // 审核不通过
    async shbu(id, status) {
      this.dialogVisible = false
      const data = {
        id,
        status: '审核未通过'
      }
      const res = await post('/article/changeStatus', data)
      if (res) {
        this.$message({
          message: '审核未通过',
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllArticle()
      } else {
        this.$message.error('审核不通过失败')
      }
    },
    // 审核 通过id借口获取属性赋值
    async Shenhe(id) {
      this.dialogVisible = true
      const data = {
        id
      }
      const res = await get('/article/findById', data)
      this.title = res.data.title
      this.content = res.data.content
      this.id = res.data.id
      this.status = res.data.status
    },
    // 推荐
    async tuijian(id, status) {
      const data = {
        id,
        status: '推荐'
      }
      const res = await post('/article/changeStatus', data)
      if (res) {
        this.$message({
          message: '推荐成功',
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllArticle()
      } else {
        this.$message.error('推荐失败')
      }
    },
    // 删除
    async shanchu(id) {
      const data = { id }
      const res = await get('/article/deleteById', data)
      if (res) {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        // 重新刷新页面的数据
        this.getAllArticle()
      } else {
        this.$message.error('删除失败')
      }
    },
    // 获取所有栏目
    queryDate() {
      const data = {
        page: 1,
        pageSize: 7
      }
      let res=this.getAllCategoryData(data)
      this.categoryData_=res.data
    },
    // 按条件查询
    queryFengCai() {
      const data = {
        title: this.input,
        status: this.Status_,
        categoryId: this.lanmu
      }
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if (!data[key]) {
          delete data[key]
        }
      }
      // 将参数 赋值给 queryData
      this.queryData = data
      // 将页数强制回到第一页
      this.currentPage = 1
      // 重新加载产品数据
      this.getAllArticle()
      this.queryDate()
    },
    // 表格数据  所有学生风采
    async getAllArticle() {
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize
      }
      const res = await get('/article/pageQuery', { ...data, ...this.queryData })
      console.log(res.data.list)
      this.tableData = res.data.list
      this.total = res.data.total
      // this.categoryData=res.data.list.category;
      // console.log(this.categoryData)
    },
    // 分页 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.getAllArticle()
    },
    // 每页大小
    handleSizeChange(val) {
      // 改变每页大小
      this.pageSize = val
      this.currentPage = 1
      this.getAllArticle()
    },
    // 关对话框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  },
  created() {
    // 获取表格所有数据
    this.getAllArticle()
    // 自动获取栏目
    this.queryDate()
     
    
  },
  mounted() {}
}
</script>
<style scoped>
.footer{
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>
